<template>
  <div class="scrollbarPage">
    <el-scrollbar
      ref="scrollContainer"
      :vertical="false"
      class="scroll-container"
      @wheel.native.prevent="handleScroll"
    >
      <router-link
        ref="tag"
        class="tags-view-item"
        :class="isActive(tag) ? 'active' : ''"
        v-for="tag in TagList"
        :to="tag.path"
        :key="tag.path"
        @contextmenu.prevent.native="openMenu(tag, $event)"
      >
        {{ tag.name }}
        <span
          class="el-icon-close"
          @click.prevent.stop="closeSelectedTag(tag)"
        ></span>
      </router-link>
    </el-scrollbar>
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
      <li @click="closeSelectedTag(selectedTag)">关闭当前</li>
      <li @click="closeOthersTags(selectedTag)">关闭其他</li>
      <li @click="closeAllTags()">关闭所有</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tagsView",
  props: {
    asideShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      left: 0,
      visible: false,
      top: 0,
      selectedTag: {},
      TagList: []
    };
  },
  computed: {
    scrollWrapper() {
      return this.$refs.scrollContainer.$refs.wrap;
    },
    breadcrumbList() {
      return this.$route;
    }
  },
  watch: {
    breadcrumbList(val) {
      let includeVal = this.TagList.some(item => {
        return item.path == val.path;
      });
      if (!includeVal) {
        this.TagList.push(val);
      }
    },
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeVisible);
      } else {
        document.body.removeEventListener("click", this.closeVisible);
      }
    }
  },
  mounted() {
    this.initTag();
  },
  methods: {
    initTag() {
      this.TagList.push({
        path: "/index",
        name: "首页"
      });
      if (this.$route.path !== "/index") {
        this.TagList.push(this.$route);
      }
    },
    isActive(route) {
      return route.path === this.$route.path;
    },

    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 40;
      const $scrollWrapper = this.scrollWrapper;
      this.$refs.scrollContainer.$refs.wrap.scrollLeft =
        $scrollWrapper.scrollLeft + eventDelta / 4;
    },
    openMenu(tag, e) {
      this.visible = true;
      this.selectedTag = tag;
      let sliderWidth = 0;
      if (this.asideShow) {
        sliderWidth = 200;
      }
      this.left = e.clientX - sliderWidth;
      this.top = e.clientY;
    },
    closeSelectedTag(tag) {
      let latestView = null
      if (tag.path != "/index") {
        this.TagList.forEach((o,index)=>{
          if(o.path == tag.path){
            latestView = index
          }
        })
        this.TagList = this.TagList.filter(o => {
          return o.path != tag.path;
        });
      }
      if (tag.path == this.$route.path) {
        this.$router.push({ path: this.TagList[latestView-1].path });
      }
      this.closeVisible();
    },
    closeAllTags() {
      this.TagList = [
        {
          path: "/index",
          name: "首页"
        }
      ];
      this.$router.push({ path: "/" });
      this.closeVisible();
    },
    closeOthersTags(selectedTag) {
      this.TagList = this.TagList.filter(o => {
        return o.path == "/index" || selectedTag.path == o.path;
      });
      this.$router.push({ path: selectedTag.path });
      this.closeVisible();
    },
    refreshSelectedTag(selectedTag) {
      this.$router.replace(selectedTag.path);
      this.closeVisible();
    },
    closeVisible() {
      this.visible = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
  .scroll-wrapper {
    position: absolute;
  }
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.tags-view-item {
  display: inline-block;
  position: relative;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: rgba(255, 255, 255, 0.8);
  padding: 0 10px;
  font-size: 12px;
  margin-left: 7px;
  margin-top: 4px;
  border-radius: 3px;
  &:first-of-type {
    margin-left: 15px;
  }
  &.active {
    background-color: #0badf9;
    color: #fff;
    border-color: #0badf9; //#42b983
    &::before {
      content: "";
      background: #fff;
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: relative;
      margin-right: 2px;
    }
  }
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 2;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
.el-scrollbar__view{
  a{
    text-decoration:none
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      margin-left: 3px;
      &:before {
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
      }
      &:hover {
        background-color: #f9470b; //#b4bccc
        color: #fff;
      }
    }
  }
}
</style>
